import {defineComponent, onMounted, ref, resolveComponent} from "vue";
import "./index.less";
import {ElIcon, ElMenu, ElMenuItem, ElSubMenu} from "element-plus";
import {useRoute} from "vue-router";
import {listMenuByClient} from "@/service/system/MenuController";
import { iconMap } from "@/utils/icon";

const Side = defineComponent(() => {

  const route = useRoute();

  const menuList = ref<any[]>([]);

  onMounted(() => {
    initData();
  });

  const initData = async () => {
    const res = await listMenuByClient("security");
    if (res.code === "000000") {
      menuList.value = res.data || [];
    }
  }

  const handleSelect = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
  }

  return () => (
    <div class="menu-box">
      <ElMenu
        default-active={route.path}
        router
        class="el-menu-demo"
        onSelect={handleSelect}
        active-text-color="#409eff"
        background-color="#FFFFFF"
        text-color="black"
      >
        {
          menuList.value.map((item: any, index: number) => {
            return (
              <ElSubMenu index={index} v-slots={{
                title: () => {
                  return <>
                    <ElIcon>{ iconMap[item.icon || "User"] }</ElIcon>
                    <span>{item.name || "-"}</span>
                  </>;
                },
              }}>
                { item.children?.map((children: any) => {
                  return (
                    <ElMenuItem index={children.path}>{ children.name }</ElMenuItem>
                  );
                }) }
              </ElSubMenu>
            );
          })
        }
      </ElMenu>
    </div>
  );

});

export default Side;
